<template>
  <div class="song">
    <div class="center">
      <!-- 左边 -->
      <div class="left">
        <show-song
          :songDetail="songDetail"
          :lyric="lyric"
          :total="total"
          :comments="comments"
        ></show-song>
        <!-- input -->
        <song-input :total="total" :info="info"> </song-input>
        <!-- 全部评论 -->
        <all-song-comments
          :comments="comments"
          :total="total"
          :info="info"
        ></all-song-comments>
        <!-- 分页 -->
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          :current-page="commentsInfo.offset / commentsInfo.limit + 1"
          :page-size="commentsInfo.limit"
        >
        </el-pagination>
      </div>
      <!-- 右边 -->
      <div class="right">
        <simi-song :simiSong="simiSong"></simi-song>
      </div>
    </div>
    <!-- 底部 -->
    <main-footer></main-footer>
  </div>
</template>

<script>
import { ListDetail } from '@/utils/class.js'
import {
  getSongDeatil,
  getSongLyric,
  getSongComment,
  getSimiSong
} from '@/api/api.js'
import showSong from './components/showSong.vue'
import SongInput from './components/songInput.vue'
import AllSongComments from './components/allSongComments.vue'
import MainFooter from '../../components/common/mainFooter.vue'
import SimiSong from './components/simiSong.vue'
export default {
  components: { showSong, SongInput, AllSongComments, MainFooter, SimiSong },
  data() {
    return {
      songDetail: {},
      // 歌词
      lyric: '',
      // 参数
      commentsInfo: {
        limit: 20,
        offset: 0,
        before: ''
      },
      comments: [],
      // 评论总
      total: 0,
      info: {
        id: 0,
        type: 0
      },
      // 相似歌曲
      simiSong: []
    }
  },
  created() {
    this.getSongDetail()
  },
  methods: {
    async getSongDetail() {
      const res = await getSongDeatil(this.$route.query.id)
      console.log(res)
      this.songDetail = new ListDetail(res.songs[0])
      this.songDetail.picUrl = this.songDetail.al1.picUrl
      const res1 = await getSongLyric(this.songDetail.id)

      this.lyric = res1.lrc.lyric
      this.info.id = this.songDetail.id

      console.log(this.songDetail)

      var re = /\d+.:?/g
      this.lyric = this.lyric.replace(re, '')
      let a = this.lyric.split('')
      for (let i in a) {
        if (a[i] == '[') {
          a.splice(i, 1)
        }
      }
      this.lyric = a.join('')
      // 获取歌曲评论
      const comment = await getSongComment(
        this.$route.query.id,
        this.commentsInfo
      )
      this.total = comment.total
      this.comments = comment.comments
      console.log(this.comments)
      // 获取相似歌曲
      const { songs: res2 } = await getSimiSong(this.$route.query.id)
      console.log(res2)
      this.simiSong = res2
    },

    // 切换页数
    handleCurrentChange(newPage) {
      this.commentsInfo.offset = (newPage - 1) * this.commentsInfo.limit
      this.getSongDetail()
    }
  },
  watch: {
    $route() {
      this.getSongDetail()
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  background: #fff;
  display: flex;
  width: 979px;
  margin: 0 auto;
  border: 1px solid #d3d3d3;
  .left {
    width: 709px;
    padding: 47px 30px 40px 39px;
    border-right: 1px solid #d3d3d3;
  }
  .right {
    width: 270px;
  }
}
.el-pagination {
  margin: 30px 0px 30px 125px;
}
</style>
